<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>{{ doubleCount }}</p>
</template>

<script>
import { ref, watchEffect, watch, computed } from 'vue'
import { info, warn, error } from '@/utils'

export default {
  name: 'HelloPage',
  props: {
    msg: String,
  },
  inject: ['app', 'ok'],
  created() {
    info('injected', this.app, this.ok)
  },
  setup(props, context) {
    info('setup HelloPage once')
    info('props', props)
    info('context', context)

    const count = ref(0)

    const doubleCount = computed(() => {
      info('computed', doubleCount.value)
      return count.value * 2
    })

    watchEffect(
      () => {
        error('E', '[post]', count.value)
      },
      {
        flush: 'post',
      },
    )

    watchEffect(() => {
      error('E', '[ pre]', count.value)
    })

    watchEffect(
      () => {
        error('E', '[sync]', count.value)
      },
      {
        flush: 'sync',
      },
    )

    watch(
      count,
      (newValue, oldValue) => {
        warn('W', '[post]', `${oldValue} --> ${newValue}`)
      },
      {
        flush: 'post',
      },
    )

    watch(count, (newValue, oldValue) => {
      warn('W', '[ pre]', `${oldValue} --> ${newValue}`)
    })

    watch(
      count,
      (newValue, oldValue) => {
        warn('W', '[sync]', `${oldValue} --> ${newValue}`)
      },
      {
        flush: 'sync',
      },
    )

    return {
      count,
      doubleCount,
    }
  },
}
</script>
